<script setup lang="ts">
import { onMounted } from 'vue';
import { registerMicroApps, start, initGlobalState } from 'qiankun';
import routes from '@/configs/qiankun-route';
onMounted(async () => {
    const state = {
        user: {name: 'admin', id: '1'},
        token: 'xxx-xxx-xxx'
    }
    const globalActions = initGlobalState(state);
    globalActions.onGlobalStateChange((state) => {
        console.log('[主应用] global state change', state)
    })
    const appsWithProps = routes.map(item => ({
        ...item,
        props: {
            state
        }
    }))
    // 注册子应用
    registerMicroApps(appsWithProps, {
        beforeLoad: [(app) => {
            console.log('[主应用] before load', app.name)
            return Promise.resolve()
        }],
        beforeMount: [(app) => {
            console.log('[主应用] before mount', app.name)
            return Promise.resolve()
        }],
        afterMount: [(app) => {
            console.log('[主应用] after mount', app.name)
            return Promise.resolve()
        }]
    })
    // 启动 qiankun
    start({
        prefetch: true,
        sandbox: {
            strictStyleIsolation: false,
            experimentalStyleIsolation: true
        }
    })
})
</script>
<template>
    <div id="subapp-viewport"></div>
</template>